<template>
<div id="hotList">
	<!--顶部-->
	<div id="city-header">
			<p class="iconfont icon-fanhui" @click="test()"></p>
			<router-link to="/home/hot" id="title" >正在热映</router-link>
			<router-link to="/home/coming" id="titleTwo" >即将上映</router-link>
		</div>
	<!--//搜索栏-->
	<div class="cont-seach">
		<router-link to="/home/city" class="cCtiy">广州<span class="iconfont icon-xia"></span></router-link>
		<router-link to="/home/search"><input type="search" name="search" id="search" value="" placeholder="影片/影院/影人，任你搜" /></router-link>
		<strong class="iconfont icon-sousuo"></strong>
	</div>
	<!--列表栏-->
	<div id="list">
		<ul>
			<router-link v-for="(item, index) in hotMovies" :to="{ name: 'mdetail', params: { classid: item.id }}" key="index" tag="li">
				<img :src="item.img" class="imgpic"/>
				<p class="title">{{item.t}}
				<span class="score">{{item.r}}</span>
				</p>
				
				<p class="present">“{{item.commonSpecial}}</p>
				<!--<p class="title">{{item.versions}}</p>-->
				<p v-for="list in item.versions" id="mark">{{list.version}}</p>
				<p class="screenings">{{item.NearestCinemaCount}}家影院上映{{item.wantedCount}}场</p>
				<a href="javascript:;" class="ticket">购票</a>
			</router-link>
		</ul>
	</div>
	<span class="iconfont icon-shang" id="top" @click="tophide()"></span>
</div>
</template>

<script>
	import headerToggle from "@/md/headerToggle.js"
	import hotmovies from "@/json/hotmovies.json"
	export default{
		data(){
			return{
				hotMovies:[]
			}
		},
		mounted(){
			headerToggle.hide();
			this.hotMovies = hotmovies.ms;
//			console.log(hotmovies.ms)
//			var obj = hotmovies.ms;
//			for(var i = 0; i < obj.length; i++){
//				for(var j = 0 ; j <obj[i].versions.length; j ++){
//				
//				}
//			}
//			console.log(obj[0].versions[0].version)


			//滚动事件
			document.addEventListener('scroll',function(){
				var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; 				if(scrollTop>300){ 
					document.getElementById("top").style.display = "block"; 
				}else{
					document.getElementById("top").style.display = "none";
				};
			})
		},
		methods:{
			test(){
				window.history.go(-1);
			},
			tophide(){
				var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; 
				if(scrollTop>300){
					document.body.scrollTop = 0;
					document.documentElement.scrollTop = 0;
				}else{
					document.getElementById("top").style.display = "none";
				}
		}
		},
		components:{
			
		}
	}
</script>

<style scoped lang="scss">
@import "~@/scss/main.scss";
#hotList{
	overflow: auto;
	/*//顶部*/
	 #city-header{
 	@include rect(100%, 0.53rem);
 	background-color: #1C2635;
 	.iconfont{
 		color:#B5B8BD;
 		float:left;
 		font-size: 24px;
 		margin:12px 0 0 12px;
 	}
 	#title{
 		color:#fff;
 		float:left;
 		font-size:16px;
 		background:#1c2635;
 		border-radius:5px;
 		width:100px;
 		height:31px;
 		text-align: center;
 		margin-top:10px;
 		line-height:31px;
 		margin-left:50px;
 	}
 	#titleTwo{
 		color:#999979;
 		line-height:31px;
 		float:left;
 		font-size:16px;
 		background:#0D121A;
 		border-radius:5px;
 		width:100px;
 		height:31px;
 		text-align: center;
 		margin-top:10px;
 	}
 }
	
/*搜索样式*/
.cont-seach{
	position:relative;
	@include rect(100%, 0.65rem);
	background:#F6F6F6;
	.cCtiy{
		float:left;
		font-size:20px;
		margin:10px 10px 0 10px;
		line-height: 55px;
		color:#333;
		.iconfont{
			margin: 0 5px;
		}
	}
	#search{
		float:left;
		width:267px;
		height:43px;
		border-radius:10px;
		border:1px solid #ccc;
		font-size: 16px;
		text-indent: 26px;
		margin-top:15px;
	}
	.icon-sousuo{
		position:absolute;
		left:92px;
		top:24px
	}
}

/*列表样式*/
#list{
	ul{
		@include rect(100%,100%);
		li{
			position: relative;
			float:left;
			@include rect(100%, 1.84rem);
			border-bottom: 1px solid #ccc;
			.imgpic{
				@include rect(0.78rem, 1.18rem);
				float:left;
				margin:10px;
			}
			.score{
				display: inline-block;
				@include rect(0.64rem, 0.24rem);
				background:#659D0E;
				font-weight: 100;
				text-align:center;
				line-height:24px;
				color:#fff;
				border-radius: 10px;
			}
			.title{
				@include rect(70%, 0.38rem);
				float:left;
				margin-top:10px;
				margin-left:10px;
				line-height: 38px;
				font-size:18px;
				text-align: left;
				font-weight:900;
				overflow: hidden;
   				white-space: nowrap;
    			text-overflow:ellipsis;
			}
			.present{
				float:left;
				@include rect(70%, auto);
				font-size: 14px;
				text-indent: 30px;
				color:#659D0E;
			}
			#mark{
				float:left;
				width:auto;
				border:1px solid #659D0E;
				height:23px;
				margin:10px;
				padding:3px;
			}
			.screenings{
				width: 70%;
				color:#ccc;
				font-size:14px;
				float:left;
			}
			.ticket{
				position: absolute;
				right:20px;
				font-size:16px;
				color:#fff;
				background:#FF8600;
				display: inline-block;
				@include rect(0.93rem,0.33rem);
				line-height:33px;
				text-align: center;
				border-radius: 10px;
				bottom:20px;
			}
		}
	}
}

.icon-shang{
		position:fixed;
		display:none;
		right:10px;
		bottom: 10px;
		width:40px;
		height:40px;
		font-size:30px;
		background:rgba(96,96,96,.4);
		border-radius: 20px;
		line-height:40px;
		text-align: center;
		color:#fff;
	}

}
</style>